<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-row class="right-videos">
      <el-divider content-position="center">轮播设置</el-divider>
      <el-form>
        <dropdown-normal v-model="commonAttr.paginationType" :valLists="PAGINATION_TYPE" label="分页器类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.dot || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns" label="分页器颜色" :valLists="CAROUSEL_COLOR_TYPES" v-model="commonAttr.paginationColorType" @change="onChangeAttr"></dropdown-normal>
         <div v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.btns || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns">
          <p class="margin-left-right-16">翻页左按钮</p>
          <add-img-con :url="commonAttr.preBtnUrl" comAttr="commonAttr" picAttr="preBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
          <p class="margin-left-right-16">翻页右按钮</p>
          <add-img-con :url="commonAttr.nextBtnUrl" comAttr="commonAttr" picAttr="nextBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>   
          <input-normal label="翻页按钮宽度" v-model="commonAttr.swiperBtnWidth" @change="onChangeAttr"></input-normal>
          <input-normal label="翻页按钮高度" v-model="commonAttr.swiperBtnHeight" @change="onChangeAttr"></input-normal>
        </div>
        <dropdown-normal v-model="commonAttr.carouselType" :valLists="CAROUSEL_TYPES" label="轮播类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <div v-if="commonAttr.carouselType == CAROUSEL_TYPES_MAP.slidesPerView">
          <input-normal label="显示多少个滑块" v-model="commonAttr.slideNum" @change="onChangeAttr"></input-normal>
        </div>
        
        <switch-normal v-model="commonAttr.autoTurnPage" label="自动翻页" @change="onChangeAttr"></switch-normal>
        <slider-normal v-if="commonAttr.autoTurnPage" v-model="commonAttr.turnPageTime" :min="0" :max="10" :step="1" label="翻页时间" @change="onChangeAttr"></slider-normal>
        
        <color-normal v-model="commonAttr.maskColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <input-normal label="播放按钮宽度" v-model="commonAttr.playBtnWidth" @change="onChangeAttr"></input-normal>
        <input-normal label="播放按钮高度" v-model="commonAttr.playBtnHeight" @change="onChangeAttr"></input-normal>
        <slider-normal v-model="commonAttr.playBtnFontSize" label="播放按钮大小" :max="300" :step="1" @change="onChangeAttr"></slider-normal>
        <color-normal v-model="commonAttr.playBtnColor" label="播放按钮颜色" format="rgb" @change="onChangeAttr"></color-normal>
      </el-form>
      <div class="margin-left-right-16 margin-bottom-10 margin-top-10"><el-button  @click.stop="onAddItem" type="primary"><el-icon><i class="jy-icon-plus"></i></el-icon>添加视频</el-button></div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists"  :name="index+1" :key="'drag_'+index" class="list-group-item">
          <template #title>
            第{{DIGIT_MAP[index]}}屏视频<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <add-video-con :item="item" :compItem="componentData" :index="index" class="margin-top-10"></add-video-con>
        </el-collapse-item>
      </el-collapse>
    </el-row>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import AddVideoCon from '@/views/components/add-video-con.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

  import { DIGIT_MAP } from '@/common/const'
  import { editUtils } from '@/views/js/edit-utils'
  import { PAGINATION_TYPE, PAGINATION_TYPE_MAP } from '@/common/const'
  import { CAROUSEL_COLOR_TYPES, CAROUSEL_TYPES, CAROUSEL_TYPES_MAP } from '@/const/'

  export default {
    name: "RightVideos",
    mixins: [editUtils],
    setup () {
      return {
        DIGIT_MAP: DIGIT_MAP,
        PAGINATION_TYPE: PAGINATION_TYPE,
        PAGINATION_TYPE_MAP: PAGINATION_TYPE_MAP,
        CAROUSEL_TYPES: CAROUSEL_TYPES,
        CAROUSEL_TYPES_MAP: CAROUSEL_TYPES_MAP,
        CAROUSEL_COLOR_TYPES: CAROUSEL_COLOR_TYPES,
      }
    },
    components: {
      RightTemplate,
      AddVideoCon,
      SliderNormal,
      SwitchNormal,
      ColorNormal,
      InputNormal,
      DropdownNormal,
      AddImgCon,
    },
  };
</script>
